<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>qTip2 - Pretty powerful tooltips - Demo - jMonthCalendar integration</title>

<!--Stylesheets-->
<link rel="stylesheet" type="text/css" href="http://media1.juggledesign.com/qtip2/css/master.css" />
<link rel="stylesheet" type="text/css" href="http://craigsworks.com/projects/qtip2/packages/latest/jquery.qtip.min.css" />
<link rel="stylesheet" type="text/css" href="http://media1.juggledesign.com/qtip2/css/demos.css" />
<link rel="stylesheet" type="text/css" href="http://media1.juggledesign.com/qtip2/css/jmonthcalendar.css"/>

<!--JavaScript - Might want to move these to the footer of the page to prevent blocking-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://craigsworks.com/projects/qtip2/packages/latest/jquery.qtip.min.js"></script>
<script type="text/javascript" src="http://media2.juggledesign.com/qtip2/js/jmonthcalendar.js"></script>
</head>
<body class="demo-jmonthcalendar">

<div id="content" class="preview">
   
<div id="jMonthCalendar"></div>

<script type="text/javascript" class="example">
$(document).ready(function()
{
	// Setup your calendar events
	var events = [
		{ 'EventID': 1, 'StartDateTime': 'new Date(2010, 11, 12)', 'EndDateTime': 'new Date(2010, 11, 12)', 'Title': '8:00pm - Date with Laura', 'URL': '#', 'Description': 'Romantic meal on the sea front. <b>Remember the flowers!</b>' },
		{ 'EventID': 2, 'StartDateTime': 'new Date(2010, 11, 25)', 'EndDateTime': 'new Date(2010, 11, 25)', 'Title': 'qTip2 Release', 'URL': '#', 'Description': 'Could it be? We\'ll find out soon enough...' }
	];

	// Initialize the calendar
	$.jMonthCalendar.Initialize(
	{
		calendarStartDate: new Date(2010, 11, 1),
		onEventBlockClick: function(event)
		{
			$(this).qtip({
				overwrite: false, // Force one tooltip per event
				content: event.data.Event.Description, // Use the event description from the event.data object
				position: {
					my: 'top center', // Position the tooltip...
					at: 'bottom center', // ...at the bottom of the event
					viewport: $(window) // Try to keep the tooltip onscreen at all times
				},
				show: {
					event: 'click', // Show the tooltip when event is clicked and tooltip is 'ready' e.g. rendered
					ready: true
				},
				hide: 'unfocus', // Hide when the tooltip loses focus
				style: {
					classes: 'ui-tooltip-tipsy ui-tooltip-shadow' // Apply a dark theme to make it look extra sexy...
				}
			});
		}
	}
	, events);
});
</script>

</div>
</body>
</html>
